<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
</ul>
<script>
    var ul = document.getElementById("ul");
    var lis = ul.children;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function (e) {
//            this.style.backgroundColor = "red";
//            e.target.style.backgroundColor = "green";
//            console.log(this == e.target);
            //console.log(this);
            //console.log(e.currentTarget);
            //console.log(e.target);
        }
    }

    ul.onclick = function (e) {
        //console.log(this); ul
        //console.log(e);
        //console.log(e.target);真正被点击的那个对象
        e = e || window.event//处理事件对象的兼容性问题
        //var target = e.target || e.srcElement//处理e.target的兼容性问题
        //target.style.backgroundColor = "red";
        console.log(e.currentTarget);//ul
        console.log(this);//ul

        console.log(e.target);//当前所点击的li标签
    }
</script>
</body>
</html>
